<template>
	<view>
		<view style="width: 100%; border-bottom: 0 none; position: fixed; z-index: 2">
		    <view style="background: #ffffff; position: relative">
		        <view class="h-tab vp-flex">
		            <view :class="'h-tab-item vp-flex_1 ' + (filt === '0' ? 'on' : '')" data-filt= '0'
		                @tap="onFilterChange">全部</view>
		            <view :class="'h-tab-item vp-flex_1 ' + (filt === '1' ? 'on' : '')" data-filt="1"
		                @tap="onFilterChange">待支付</view>
		            <view :class="'h-tab-item vp-flex_1 ' + (filt === '2' ? 'on' : '')" data-filt="2"
		                @tap="onFilterChange">待服务</view>
		            <view :class="'h-tab-item vp-flex_1 ' + (filt === '3' ? 'on' : '')" data-filt="3"
		                @tap="onFilterChange">已完成</view>
		            <view :class="'h-tab-item vp-flex_1 ' + (filt === '4' ? 'on' : '')" data-filt="4"
		                @tap="onFilterChange">已取消</view>
		        </view>
		    </view>
		</view>
		<view style="height: 100rpx"></view>
		<block v-if="list != null">
			<view v-if="list != null && list.length == 0" style="padding: 40rpx 40rpx 40rpx 40rpx; text-align: center">
			    <image src="/static/resource/images/empty.png" mode="widthFix" style="width: 200rpx" />
			    <view class="f5">没有相关内容~</view>
			</view>
			<view v-else class="od-list">
				<block v-for="(item, index) in list" :key="index">
					 <view class="od-item" @tap="toOrder" :data-id="item.out_trade_no">
						  <view class="weui-cell weui-cell_access">
							  <view class="weui-cell__hd">
							      <view>
							          <image :src="item.service_logo_image_url" mode="widthFix" class="od-logo"
							              style="width: 100rpx; height: 100rpx; margin-right: 20rpx" />
							      </view>
							  </view>
							  <view class="weui-cell__bd">
								  <view>
								      <text style="font-weight: bold">{{ item.service_name }}</text>
								  </view>
								  <view class="od-info">
									  <block v-if="item.service_stype <= 20">
									      <view>
									          <text>{{ item.hospital_name }}（{{ item.area_name }}）</text>
									      </view>
									      <view>
									          预约时间：
									          <formater :timestamp="item.starttime" format="MM-dd hh:mm"></formater>
									      </view>
									      <view>
									          就诊人员：
									          <text>{{ item.client_name }}</text>
									      </view>
									  </block>
									  <block v-if="item.service_stype > 20 && item.service_stype < 100">
									      <view>
									          <text>{{ item.hospital_name }}（{{ item.area_name }}）</text>
									      </view>
									      <view>
									          处理时间：
									          <formater :timestamp="item.starttime" format="MM-dd hh:mm"></formater>
									      </view>
									  </block>
									  <block v-if="item.service_stype > 100">
									      <view>
									          服务时间：
									         <formater :timestamp="item.starttime" format="MM-dd hh:mm"></formater>
									      </view>
									      <view>
									          服务对象：
									          <text>{{ item.client_name }}</text>
									      </view>
									      <view>服务地址：<text>{{item.address.address}}</text> </view>
									  </block>
								  </view>
							  </view>
							   <view class="weui-cell__ft">
								   <!-- 待付款 -->
								   <block v-if="item.trade_state == '待支付'">
								       <view style="color: #ffa200"><text>待支付</text></view>
								       <view style="color: #ffa200">
								            <counter style="font-size: 24rpx" :second="item._exp_time"
								               @counterOver="onCounterOver" /> 
								       </view>
								   </block>
								   <!-- 进行中 -->
								   <block v-if="item.trade_state == '待服务'">
								       <view style="color: #1da6fd"><text>待服务</text></view>
								   </block>
								   <!-- 已完成 -->
								   <block v-if="item.trade_state == '已完成'">
								       <view style="color: #21c521"><text>已完成</text></view>
								   </block>
								   <!-- 已取消 -->
								   <block v-if="item.trade_state == '已取消'">
								       <view style="color: #999999"><text>已取消</text></view>
								   </block>
							   </view>
						  </view>
					 </view>
				</block>
			</view>			
		</block>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				filt:'0',
				list:[]
			}
		},
		onShow(){
			this.filt = app.globalData.orders_filt
			//console.log(this.filt)
			this.getListData()
		},
		methods: {
			onFilterChange(e){
				 const {filt: curFilt} = e.currentTarget.dataset
				 if(curFilt === this.filt ) return
				 this.filt = curFilt
				 this.getListData()
			},
			async getListData(){
				console.log('token',uni.getStorageSync('token'))
				const res = await app.globalData.utils.request({
					url:'/order/list',
					method:'get',
					data:{
						state: this.filt
					},
					header:{
						token: uni.getStorageSync('token')
					}
				})
				this.list = res.data
				console.log(this.list)
			},
			//订单跳转到详情
			toOrder(e){
				uni.navigateTo({
					url:`../order/details?oid=${e.currentTarget.dataset.id}`
					
				})
			},
			//倒计时结束后的回调
			onCounterOver(){
				this.getListData()
			}
		}
	}
</script>

<style>
	@import 'index.css'
</style>
